<template>
  <div class="box">
    <div class="ps">
      <p>{{ human.name }}</p>
      <p>{{ human.group }}</p>
    </div>
    <div class="btns" v-if="istodo">
      <el-button @click.native="showDo('words')" class="first-btn" type="warning">真心话</el-button>
      <el-button @click.native="showDo('risk')" class="second-btn" type="danger">大冒险</el-button>
    </div>
    <div v-if="!istodo" class="todo">
        {{todo}}
    </div>
  </div>
</template>

<script>
import risk from "../json/risk.json"
import words from "../json/words.json"
export default {
  name: "LuckyDog",
  data() {
    return {
        risk:risk,
        words:words,
        todo:"",
        istodo:true
    };
  },
  computed: {
    human() {
      return this.list.filter((el) => el.choseFlag)[0];
    },
  },
  props: ["list"],
  methods: {
      showDo(arrName){
          let num = Math.floor(Math.random()*this[arrName].length)
          this.todo=this[arrName][num].title
          this.istodo = !this.istodo
      }
  },
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  bottom: 580px;
  left: 250px;
  width: 500px;
  height: 300px;
  background-color: rgba(218, 209, 198, 0.8);
  text-align: center;
  p {
    padding: 10px 20px;
    margin: 0;
  }
}
.ps{
    position: relative;
    top: 70px;
}
.btns{
    position: relative;
    top: 110px;
    .first-btn{
        margin-right: 30px;
    }
    .second-btn{
        margin-left: 30px;
    }
}
.todo{
    position: relative;
    top: 110px;
}
</style>